<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>任务-评分</title>

<%@ include file="/common/commonLib.jsp"%>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/courseTaskCorrect.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
<link rel="stylesheet" type="text/css" href="<c:url value='/wangEditor/dist/css/wangEditor.css'/>" />

<script src="<c:url value='/js/courseTaskCorrect.js'/>" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div class="container-fluid main">
		<!-- 创建任务 -->
		<div class="row">
			<div class="col-md-12">
				<%@include file="/common/header.jsp"%>
			</div>
			<div class="col-md-12">
				<%@include file="common/courseHeader.jsp"%>
			</div>
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-3">
						<%@include file="common/courseLeft.jsp"%>
					</div>
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-12">
								<%@include file="common/courseNavbar.jsp"%>
							</div>
							<div class="col-md-12">
								<div class="tab-nav">
									<a id="task-correct-href1" class="front-nav">任务首页</a>
									<a id="task-correct-href4" class="front-nav">&nbsp;>&nbsp;任务分配/提交记录</a>&nbsp;>&nbsp;
									<span class="back-nav">任务提交/批改详情</span>
								</div>
							</div>
							<div class="col-md-12" style="margin-top:2rem;">
								
								<div class="row">
									<div class="col-md-12">
										<label for="">提交者</label>
										<span id="submitName"></span>
									</div>
										
									<div class="col-md-12">
										<label for="">任务提交内容</label>
										<span id="replyAnswer"></span>
									</div>
										
									<div class="col-md-12">
										<label for="">附件</label>
										<ul id="task-file-list-correct">
															
										</ul>
									</div>
									<div class="col-md-12" style="margin-top: 2rem;" id="re-upload-part">
										<div class="row">
											<div class="col-md-3">
												<input type="button" id="re-upload-file-btn" onclick="$('#re-upload-file').click();$('#ensure-to-reupload').show();$('#inform-to-sure').show();" class="btn btn-primary" value="补交文件">
											</div>
											<div class="col-md-5">
												<!-- <a style="font-size:1rem;">单次上传文件大小上限为90MB，若是大文件，请打包多次上传</a> -->
												<div id="inform-to-sure" class="inform-to-sure">
													<img alt="" src="../image/inform-to-sure.png">
													<div style="line-height:3rem;">点击"确定"按钮完成补交</div>
												</div>
												
											</div>									
											<div class="col-md-4">
												<input type="button" id="ensure-to-reupload" style="display:none;" class="btn btn-primary" value="确定">
											</div>
											<div class="col-md-12" style="display:none;">
												<input type="file" id="re-upload-file" name="file" onchange="reUploadFile()" />
											</div>
										</div>								
									</div>
																		
									<div class="col-md-12" id="score-first">
										<label for="">得分</label>
										<span id="submitScore"></span>
									</div>
										
									<div class="col-md-12" id="evaluate-first">
										<label for="">教师评语</label>
										<span id="evaluate"></span>
									</div>
									
									
									<div class="col-md-12">
										<label for="">评分</label>
										<span id="submitScore-input" contenteditable="true"></span>
									</div>
										
									<div class="col-md-12">
										<label for="">教师评语</label>
										<div id="evaluate-input"></div>
									</div>

									<div class="col-md-12 btn-correct">
										<input type="button" id="correct-submit-btn" class="btn btn-primary" value="提交" >
										<input type="button" id="correct-share-btn" class="btn btn-primary" value="共享" >
										<div style="height: 60px"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 确认补交页面(提示用户会覆盖原有附件，请下载原有附件重新上传) -->
	<div class="modal fade" id="ensure-to-reupload-layer">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="text-align:center;">
					<h2 class="modal-title" style="display:inline;float:left;">补交附件</h2>
					<button type="button" class="close" data-dismiss="modal" style="display:inline;float:right;">&times;</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-xs-12">
							<div class="build-excel-layer-title">
								<span style="white-space:pre;">  </span><span class="detail-title">请确认是否补交附件？</span>  
							</div>
						</div>
						<div class="col-xs-12">
							<div class="form-group">
								<div class="row">
									<div class="col-xs-2"></div>
									<div class="col-xs-8">
										<label for="">!!补交附件操作会覆盖原有附件!!<br>若原提交中包括了附件，请重新下载到您的本地，再重新上传。</label>
									</div>
									<div class="col-xs-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer" style="text-align:center;">
					<button type="button" id="cancel" class="btn btn-primary" style="margin-right: 2rem;">取消</button>
					<button type="button" id="confirm" class="btn btn-primary" style="margin-left: 2rem;">确认</button>
				</div>
			</div>
		</div>
	</div>
	<%@include file="/common/footer.jsp"%>
	<script src="<c:url value='/wangEditor/dist/js/wangEditor.js'/>" type="text/javascript" charset="utf-8"></script>
</body>
<script>
var data=${data};
$(document).ready(function() {

	if (data.status != "success") {
		layer.alert(data.message);
		return;
	}
	$("#task").css("color","#00b43c");
	changeUrl(data.data.courseId);
	fetchCourse(data.data.courseId);
	initSubmitResult();
	initEvaluateInput();
	if(data.data.taskSubmitResult.type == "TASKMAIN"){
		if(data.data.taskSubmitResult.isShare=="YES") {
			$("#correct-share-btn").val("取消共享");
		} else {
			$("#correct-share-btn").val("共享");
		}
	}else{
		$("#correct-share-btn").prop("disabled",true);
	}
	
	if(data.data.taskSubmitResult.type == "PERSONALTASK") {
		$("#task-correct-href4").attr("href",CONTEXT_PATH + "taskSubmitResult/ptListData?taskId=" + data.data.taskSubmitResult.assignId);
	} else {
		$("#task-correct-href4").attr("href",CONTEXT_PATH + "taskSubmitResult/mtlistData?assignId=" + data.data.taskSubmitResult.assignId);
	}
	$("#task-correct-href1").attr("href",CONTEXT_PATH + "task/list?courseId=" + data.data.courseId);
	
	$("#correct-submit-btn").click(function() {
		 reviewSubmit(data.data.taskSubmitResult.id);
	 });
	 $("#correct-share-btn").click(function() {
		 shareResult(data.data.taskSubmitResult.id);
	 });
	 
	 $("#confirm").click(reUploadInfo);
	 
 });

var reUploadFile = function(){
	var list = $("#task-file-list-correct");
	if(list.length == 1 && list[0].innerHTML == "<li><span>无附件</span></li>"){
		list.empty();
	}
	$.ajaxFileUpload({
		url : CONTEXT_PATH+"resource/upload", //用于文件上传的服务器端请求地址
		secureuri : false, //是否需要安全协议，一般设置为false
		fileElementId : 're-upload-file', //文件上传域的ID
		dataType : 'json', //返回值类型 一般设置为json
		success : function(data, status) //服务器成功响应处理函数
		{
			if(data.status=="success"){
				var temp ="";
				temp += ("<li>");
				temp += ("<span class=\"file-name-date\" title=\""+data.data.name+"\">" + data.data.name + "</span>");
				temp += ("<input type=\"hidden\" name=\"answerAttachKey\" value=\""+data.data.key+"\" />");
				temp += ("<input type=\"hidden\" name=\"answerAttachName\" value=\""+data.data.name+"\" />");
				temp += ("<span id=\"deleteFile\"class=\"file-upload-stu\">删除</span>");
				temp += ("</li>");				
				list.append(temp);
			}else{
				layer.alert(data.message + "  文件大小上限为90MB，或者由于以下原因（文件为空文件）若因格式问题，您可以将文件压缩为rar或zip格式！");
			}
		},
		error : function(data, status, e)//服务器响应失败处理函数
		{
			//alert(e);
		}
	});
}

//将补交的文件添加到学生的提交内容中
var reUploadInfo = function() {
	
	var answerAttachName=$("#task-file-list-correct input[name='answerAttachName']");
	var answerAttachKey=$("#task-file-list-correct input[name='answerAttachKey']");
	var answerAttachFiles=[];
	
	for(var i=0;i<answerAttachName.length;i++){
		var item={
			name: answerAttachName[i].value,
			url: answerAttachKey[i].value
		};
		answerAttachFiles.push(item);
	}
	if(answerAttachFiles.length < 1){
		layer.alert("请选择文件！");
	}else {
		var json = {
			id:data.data.taskSubmitResult.id,
			resultAttachment:{
				files:answerAttachFiles
			}
		}
		var url = "";
		url=CONTEXT_PATH+"taskSubmitResult/editUploadFile";
		$.post(url, {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				layer.alert("提交成功！");
				window.location.reload();
			}else{
				layer.alert(data.message);
			}
		});
	}
	
}
var initEvaluateInput= function() {
	var initEvaluateInput = new wangEditor('evaluate-input');
	initEvaluateInput.config.menus = [
	    'fullscreen',' | ','bold','underline','italic','strikethrough','eraser',
		'forecolor','bgcolor','quote','fontfamily','fontsize','head','unorderlist',
		'orderlist','alignleft','aligncenter','alignright','link','unlink','table',
		'emotion','insertcode','undo','redo'
    ];
	initEvaluateInput.config.zindex = 20000;
	initEvaluateInput.create();
	$('#evaluate-input').attr('style','height:auto;');
}
 
var initSubmitResult= function(){
 var submit=data.data.taskSubmitResult;
	$("#submitName").text(submit.assignedName);
	if(submit.detail == null || submit.detail.trim() == "<p><br></p>" || submit.detail.trim() == ""){
		$("#replyAnswer").html("<p>无</p>");
	}else{
		$("#replyAnswer").html(submit.detail);
	}
	
	var status="已提交";
	if(submit.status=="HAVEREAD"){
		$("#submitScore").text(submit.score);
		if(submit.evaluate == null || submit.evaluate.trim() == "<p><br></p>" || submit.evaluate.trim() == ""){
			$("#evaluate").html("<p>无评语</p>");
		}else{
			$("#evaluate").html(submit.evaluate);
		}
		
		$("#evaluate-first").show();
		$("#score-first").show();
		status="已批改";
	}else{
		$("#submitScore").empty();
		$("#evaluate").empty();
		$("#evaluate-first").hide();
		$("#score-first").hide();
	}
	var fileList=$("#task-file-list-correct");
	fileList.empty();
	var resultAttach = submit.resultAttachmentBytes;
	var attach = JSON.parse(resultAttach);
	var list = attach.files;
	if(submit.type == "TASKMAIN"){
		$("#re-upload-part").show();
	}else{
		$("#re-upload-part").hide();
	}
	if(list.length <= 0){
		var s = "<li><span>无附件</span></li>";			
		fileList.append(s)
	}else{			
		for(var i=0;i<list.length;i++){
 			var item=list[i];
 			var string = item.name;
 			if((string.indexOf(".jpg")!=-1&& string.indexOf(".jpg")==(string.length-4))||(string.indexOf(".jpeg")!=-1&& string.indexOf(".jpeg")==(string.length-5))||(string.indexOf(".png")!=-1&& string.indexOf(".png")==(string.length-4))||(string.indexOf(".PNG")!=-1&& string.indexOf(".PNG")==(string.length-4))||(string.indexOf(".JPG")!=-1&& string.indexOf(".JPG")==(string.length-4))){
	 			fileList.append("<li><span style=\"width:60%;\" title=\""+item.name+"\">"+item.name+"</span><a class=\"imgview\" id=\"showimage-"+i+"\" style=\"width:20%;color:#00b43c;\">预览</a><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></li>");
	 			fileList.append("<img id=\"imgView-"+i+"\" src=\"<c:url value='/resource/picture/"+item.url+"'/>\" alt=\""+item.name+"\" style=\"display:none;width: 100%;margin: 1rem 0;border-radius: 4px;border: 1px solid #8a8a8a;\">");
 			}else{
	 			fileList.append("<li><span title=\""+item.name+"\">"+item.name+"</span><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></li>");
 			}
 		}
	}
		
};

var hideImg = function(id){
	$("*[id$='imgView-"+id+"']").hide();
}
 
var reviewSubmit = function(id){
	var score = $("#submitScore-input").text();
	var evaluate= $("#evaluate-input").html();
	if(score == null || score == ""){
		layer.alert("评分不能为空!");
	}else{
		var json={
				id:id,
				score:score,
				evaluate:evaluate
		}
		$.post(CONTEXT_PATH+"taskSubmitResult/review", {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				window.location.reload();
			}else{
				layer.alert(data.message+"（评分项请填写0-100的数字）");
				window.location.reload();
			}
		});
	}
	
}

var shareResult = function(id) {
	var submit=data.data.taskSubmitResult;
	var isShare;
	if(submit.isShare=="YES") {
		isShare = "NO";
		$("#correct-share-btn").val("取消共享");
	} else {
		isShare = "YES";
		$("#correct-share-btn").val("共享");
	}
	var json={
			id:id,
			isShare:isShare
	}
	$.post(CONTEXT_PATH+"taskSubmitResult/shareSubmit", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			window.location.reload();
		}else{
			layer.msg(data.message);
		}
	});
}
</script>
</html>